<template>
  <div :class="$style.wrap">
    <div :class="className" @click.stop="clickHandle">
      <span>{{ charIndex }}</span>
    </div>
    <div style="padding-left: 10px;flex:1 1 auto">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'CharIndex',
  props: {
    label: undefined,
    charIndex: {
      type: undefined,
      defalut: undefined,
      required: true
    },
    value: {
      type: undefined,
      defalut: undefined,
      required: true
    },
    round: Boolean,
    multiple: Boolean,
    editable: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {

    }
  },
  computed: {
    className() {
      const s = this.$style
      const c = this.round ? [s.base, s.round] : [s.base]
      if (this.multiple) {
        this.value && this.value.includes(this.label) ? c.push(s.isCheck) : ''
      } else {
        this.value === this.label ? c.push(s.isCheck) : ''
      }
      return c
    }
  },
  methods: {
    clickHandle() {
      this.$emit('question-click')
      if (!this.editable) return
      if (this.multiple) {
        if (this.value && this.value.includes(this.label)) {
          this.$emit('input', this.value.filter(e => e !== this.label))
        } else {
          this.$emit('input', [...(this.value || []), this.label])
        }
      } else {
        if (this.value === this.label) {
          this.$emit('input', undefined)
        } else {
          this.$emit('input', this.label)
        }
      }
    }
  }
}
</script>
<style lang="scss" module>
@import '@/styles/variables.scss';
.wrap{
  display: flex;
  .base{
    $w: 28px;
    flex: 0 0 $w;
    width: $w;
    height: $w;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #333;
    cursor: pointer;
  }
  .round{
    border-radius: 50%;
  }
  .isCheck{
    background: $green;
  }
}
</style>
